<template>
	<view>
		<bg-cell @click="onClick" :border="border" :showArrow="showArrow">
			<view :class="[labelPosition==='left'&& 'flex-cell']">
				<view v-if="$slots.label||label" class="flex">
					<text v-if="required" class="font-red mr-1">*</text>
					<slot name="label" v-if="$slots.label" >
					</slot>	
					<view v-else class="font-1" :style="{'color': labelColor}">
						{{label}}
					</view>
				</view>
				<view class="cell-right" v-if="$slots.value||value">
					<slot name="value" v-if="$slots.value" >
						
					</slot>	
					<view v-else class="font-1 text-grey2"  :style="{'text-align':'right', 'color': valueColor}">
						{{value}}
					</view>
				</view>
			</view>
			<view v-if="$slots.extra" class="mt-2">
				<slot name="extra"/>
			</view>
		</bg-cell>
	</view>
</template>

<script>
	export default {
		name:"bg-cell2",
		props: {
			labelPosition:{
				default:'left'
			},
			label:String,
			value:[String, Number],
			border:{
				default:true
			},
			showArrow:{
				default:false
			},
			required:{
				default:false
			},
			labelColor: {
				default:'#121212'
			},
			valueColor:{
				default:'#121212'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			onClick(){
				this.$emit("click", true)
			}
		}
	}
</script>

<style scoped>
.flex-cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-cell .cell-right {
	flex: 1 1 auto;
	text-align: right;
	display: flex;
	justify-content: flex-end;
}
</style>